<script>
	import {
		mapGetters,
		mapMutations,
		mapActions
	} from 'vuex';
	import {
		getSongUrl,
		getSongDetail
	} from '@/api/song';
	export default {
		onLaunch: function() {
			console.log('App Launch');
			let themeIcon = uni.getStorageSync('themeIcon')
			window.document.documentElement.setAttribute('data-theme', themeIcon == 'son' ? 'moon' : 'son');
		},
		onShow: function() {
			console.log('App Show');
		},
		onHide: function() {
			console.log('App Hide');
		},
		watch: {
			async musicId(newV) {
				if (newV) {
					await this.getMusicInfo(newV)
				}
			}
		},
		computed: {
			...mapGetters(['musicId'])
		},
		methods: {
			...mapMutations(['changeMusicInfo']),
			...mapActions(['createBg']),
			getMusicInfo(id) {
				return new Promise(async (resolve, reject) => {
					if (id) {
						const res = await getSongUrl({
							id: id
						});
						// console.log(res);
						const res1 = await getSongDetail({
							ids: id
						});
						// console.log(res1);
						let musicInfo = {
							name: res1.songs[0].name,
							authors: res1.songs[0].ar.map(item => item.name).join(','),
							url: res.data[0].url,
							picUrl: res1.songs[0].al.picUrl
						};
						// console.log(musicInfo.picUrl);
						this.changeMusicInfo(musicInfo);
						resolve();
					}
				});
			}
		}
	};
</script>

<style lang="scss">
	@import "uview-ui/index.scss";
	
	html,
	body {
		font-size: 14px;
		@include all_theme(#fff);
	}
</style>
